    <template>
    <!-- 项目详情 -->
    <div class="project-detail">
      <!-- 头部 -->
    <head-usual :title="project.name" :to="to"></head-usual>
    <!-- 项目编号 -->
    <div class="body-top-order">
        <span>{{project.name}}</span>
    </div>
      <!-- 订单进程 -->
    <div class="tuxing-process">
        <div class="process-total">
            <div class="process-long" :style="'width:' + processData"></div>
        </div>
        <!-- 过程提示 -->
        <div class="process-tips">
        <div class="process-tips02 ">
            <span>1</span>
            <span>发布成功</span>
        </div>
        <div class="process-tips02">
            <span>2</span>
            <span>服务商招标</span>
        </div>
        <div class="process-tips02">
            <span>3</span>
            <span>选定服务商</span>
        </div>
        <div class="process-tips02">
            <span>4</span>
            <span>执行</span>
        </div>
        <div class="process-tips02">
            <span>5</span>
            <span>验收与评论</span>
        </div>
        </div>
    </div>
    <!-- 项目评估 -->
    <div class="order-request">
        <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-money-copy"></use>
            </svg>
            <span class="req-02" @click="EvaluationHandle(1)" >钱太少</span>
            <span class="req-03">{{ProjectEvaluations.Type1}}</span>
        </div>
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shijian4"></use>
            </svg>
            <span class="req-02" @click="EvaluationHandle(2)">时间紧</span>
            <span class="req-03">{{ProjectEvaluations.Type2}}</span>
        </div>
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-bukaopu"></use>
            </svg>
            <span class="req-02" @click="EvaluationHandle(3)">不靠谱</span>
          <span class="req-03">{{ProjectEvaluations.Type3}}</span>
        </div>
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-bukaixin"></use>
            </svg>
            <span class="req-02" @click="EvaluationHandle(4)">不会做</span>
            <span class="req-03">{{ProjectEvaluations.Type4}}</span>
        </div>
    </div>
    <!-- 企业信息 -->
    <div class="company-info">
        <div class="info-hd">
            <p class="info-hd-01"><img src="~@/assets/company_logo.png" /></p>
            <span class="info-hd-02">{{pro_Member.MemName}}</span>
            <span class="info-hd-03">{{pro_Member.type}}</span>
            <span class="info-hd-04">{{pro_Member.Status}}</span>
        </div>
        <div class="info-bd">发布时间:{{project.addtime.replace("T"," ")}}</div>
        <div class="info-ft">
          <div class="info-ft-left">
              <span>金额:</span><span class="info-ft-price">￥{{project.price}} 万元</span>
          </div>
          <div class="info-ft-right">
                <span>报名人数:</span><span class="info-ft-number" >{{project.signUpNum}}</span>
          </div>
        </div>
    </div>
    <!-- 项目描述类 -->
    <div class="project-info">
        <div class="project-item-01">
          <h1>项目描述：</h1>
          <p v-html="project.description"></p>
        </div>
        <div class="project-item-01">
            <h1>招募要求：</h1>
            <p v-html="project.rewardDemand"></p>
        </div>
          <div class="project-item-01">
            <h1>项目地址：</h1>
            <p>{{project.provinces}} {{project.address}}</p>
        </div>
          <div class="project-item-01">
            <h1>接单级别：</h1>
            <p>{{project.Grade}}</p>
        </div>
          <!-- <div class="project-item-01 project-item-special">
            <h1>相关文档：</h1>
            <div class="load-text">
                <span class="text-box">txt</span>
                <span class="text-box-title">工地改建需求文档</span>
                <span class="text-box-loader">下载</span>
            </div>
        </div> -->
    </div>
    <participant :id="id"></participant>
    <footerBar :cid="id" :type="1" words="参与项目"></footerBar>
    </div>
    </template>
    <script>
    import footerBar from "@/pages/components/footerBar";
    import participant from "@/pages/projects/controls/participant";
    import { GetDetail } from "@/api/projects";
    import { ProjectEvaluation } from "@/api/projects";
    export default {
    name: "detail",
    data() {
    return {
      project: { addtime: "" },
      pro_Member: {},
      ProjectEvaluations: {},
      processData: "50%",
      id: 0,
      title: "项目详情",
      to:'/projects'
    };
    },
    created() {
    this.id = parseInt(this.$route.params.id);
    this._GetDetail();
    },
    methods: {
    //获取详情页数据
    _GetDetail() {
      this.$indicator.open();
      GetDetail(this.id).then(res => {
        if (res.StatusCode === 200) {
          this.project = res.Data.Project;
          this.pro_Member = res.Data.Member;
          this.ProjectEvaluations = res.Data.ProjectEvaluations;
          this.$indicator.close();
        }
      });
    },
    //项目评估
    EvaluationHandle(type) {
      this.$indicator.open();
      ProjectEvaluation(this.id, type).then(res => {
        if (res.StatusCode === 200) {
          if (res.Data) {
            //成功
            switch (type) {
              case 1:
                this.ProjectEvaluations.Type1 += 1;
                break;
              case 2:
                this.ProjectEvaluations.Type2 += 1;
                break;
              case 3:
                this.ProjectEvaluations.Type3 += 1;
                break;
              case 4:
                this.ProjectEvaluations.Type4 += 1;
                break;
              default:
                break;
            }
          } else {
            switch (type) {
              case 1:
                this.ProjectEvaluations.Type1 -= 1;
                break;
              case 2:
                this.ProjectEvaluations.Type2 -= 1;
                break;
              case 3:
                this.ProjectEvaluations.Type3 -= 1;
                break;
              case 4:
                this.ProjectEvaluations.Type4 -= 1;
                break;
              default:
                break;
            }
          }
          this.$indicator.close();
        }
      });
    },
    _GetDetail() {
      GetDetail(this.id).then(res => {
        if (res.StatusCode === 200) {
          this.project = res.Data.Project;
          this.pro_Member = res.Data.Member;
          this.ProjectEvaluations = res.Data.ProjectEvaluations;
        }
      });
    },
    //收藏
    CollectHandle(proid, uid) {},
    //参加
    JoinedHandle(proid, uid) {}
    },
    components: { footerBar, participant }
    };
    </script>

    <style scoped lang="scss">
    .project-detail {
    }
    .fix-header {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 10;
    }
    /* 头部 */
    .header {
    height: 44.66px;
    background: white;
    text-align: center;
    position: relative;
    }
    .turn-back {
    position: absolute;
    left: 12.33px;
    top: 12.33px;
    font-size: 20px !important;
    }
    .header-left {
    display: inline-block;
    font-size: 18px;
    color: black;
    line-height: 44.66px;
    padding-left: 74px;
    }
    .header-right {
    float: right;
    margin-top: 12.98px;
    }
    .header-right > img {
    display: inline-block;
    margin-right: 23px;
    width: 16px;
    height: 16px;
    text-align: right;
    }
    /* 订单编号 */
    .body-top-order {
    height: 53.3px;
    line-height: 53.3px;
    font-size: 14px;
    color: #282828;
    padding-left: 10px;
    font-weight: bolder;
    border-bottom: 1px solid #f4f4f4;
    border-top: 1px solid #f4f4f4;
    }
    /* 订单进程oreder-process */
    .order-process {
    height: 88px;
    border-bottom: 1px solid #f4f4f4;
    text-align: center;
    }
    /* 订单反馈 */
    .order-request {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    align-items: center;
    text-align: center;
    color: #999999;
    font-size: 12px;
    }
    .order-request > div {
    width: 25%;
    display: flex;
    align-items: center;
    font-size: 14px;
    }
    .order-request > div > .icon {
    display: block;
    float: left;
    margin-left: 16px;
    margin-right: 5px;
    color:#999999;
    }
    .order-request > div > span {
    display: block;
    float: left;
    }
    .req-02 {
    margin-right: 6.5px;
    }
    /* 企业信息 */
    .company-info {
    border-bottom: 10px solid #f4f4f4;
    border-top: 10px solid #f4f4f4;
    padding-left: 12px;
    padding-top: 16.5px;
    padding-bottom: 15px;
    overflow: hidden;
    }
    .info-hd {
    height: 44.59px;
    line-height: 44.59px;
    }
    .info-hd-01 {
    width: 40.6px;
    height: 40.6px;
    display: inline-block;
    float: left;
    display: flex;
    align-items: center;
    > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    }
    }
    .info-hd-02 {
    margin-left: 21.6px;
    color: #666666;
    font-size: 16px;
    line-height: 44.59px;
    display: inline-block;
    float: left;
    }
    .info-hd-03 {
    background: #fd4f00;
    height: 14px;
    font-size: 10px;
    display: inline-block;
    color: white;
    line-height: 14px;
    float: left;
    margin-top: 13.5px;
    margin-left: 4px;
    padding: 2px 0;
    }
    .info-hd-04 {
    display: inline-block;
    float: right;
    font-size: 14px;
    color: #3887fe;
    margin-right: 20px;
    }
    .info-bd {
    font-size: 16px;
    color: #282828;
    margin-top: 16px;
    }
    .info-ft {
    margin-top: 13px;
    font-size: 16px;
    }
    .info-ft-left {
    float: left;

    }
    .info-ft-right {
    float: right;
    margin-right: 10px;
    color: #999999;
    }
    .info-ft-price {
    color: #fd4f00;
    display: inline-block;
    margin-left: 5px;
    font-weight: bolder;
    }
    .info-ft-number {
    display: inline-block;
    margin-left: 5px;
    margin-right: 4px;
    color: #999999;
    }
    .info-ft-number-01 {
    color: #999999;
    }
    /* 项目描述 */
    .project-info {
    max-height: 1500px;
    border-bottom: 10px solid #f4f4f4;
    }
    .project-item-01 {
    width: 94%;
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 19px;
    margin: 16px auto;
    }
    .project-item-01 > h1 {
    color: #666666;
    font-size: 16px;
    font-weight: bolder;
    }
    .project-item-01 > p {
    font-size: 14px;
    color: #666666;
    margin-top: 8px;
    }
    .project-item-01 > h2 {
    margin-top: 28.3px;
    font-size: 12px;
    color: #666666;
    font-weight: normal;
    }
    .load-text {
    margin-top: 16px;

    height: 44.3px;
    background: #edf5fc;
    }
    .text-box {
    width: 22px;
    height: 22px;
    background: #4289db;
    font-size: 10px;
    color: white;
    line-height: 22px;
    margin-top: 11.15px;
    margin-left: 7px;
    display: inline-block;
    text-align: center;
    }
    .text-box-title {
    display: inline-block;
    margin-left: 17px;
    font-size: 12px;
    color: #999999;
    }
    .text-box-loader {
    font-size: 12px;
    color: #999999;
    display: inline-block;
    float: right;
    margin-top: 15px;
    margin-right: 19px;
    }
    // 进度条提示
    .process-total {
    margin-top: 29.3px;
    width: 390px;
    height: 8.5px;
    border-radius: 4.25px;
    background: #f3f3f3;
    margin-left: 12px;
    }
    /* 进度条 */
    .process-long {
    height: 8.5px;
    background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
    );
    background-color: #3887fe;
    background-size: 100%;
    border-radius: 4.25px;
    }
    .process-tips {
    overflow: hidden;
    width: 100%;
    height: 44px;
    margin-top: 14px;
    display: flex;
    text-align: center;
    }
    .process-tips02 {
    width: 20%;
    float: left;
    > :first-child {
    display: block;
    width: 20.6px;
    height: 20.6px;
    border-radius: 50%;
    background: #3887fe;
    color: white;
    padding: 2.83px;
    text-align: left;
    line-height: 10px;
    position: absolute;
    margin-top: -28.3px;
    margin-left: 29px;
    border: 3.6px solid #f4f4f4;
    }
    > :last-child {
    color: #666666;
    font-size: 12px;
    }
    }
    </style>
